<template>
	<div class="app-container">
		<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
			<el-tab-pane label="全局车费配置" name="first">
				<div class="lb-goods-edit-classify row mb-lg">
					<div class="title">时间段设置</div>
				</div>
				<el-form :rules="rules" label-width="220px">
					<el-form-item prop="value">
						<span slot="label">
							<span class="item__label">日间时段：</span>
						</span>
						<el-time-select v-model="cityFareGlobalConfigList[0].value" :picker-options="{
							start: '00:00',
							step: '00:01',
							end: '24:00'
						}" placeholder="任意时间点" @change="showNight" />
						-
						<el-time-select v-model="cityFareGlobalConfigList[1].value" :picker-options="{
							start: '00:00',
							step: '00:01',
							end: '24:00'
						}" placeholder="任意时间点" @change="showNight" />
					</el-form-item>
					<el-form-item prop="value">
						<span slot="label">
							<span class="item__label">夜间时段：</span>
						</span>
						<span v-if="cityFareGlobalConfigList">
							{{nightTimeShow?nightTimeShow:cityFareGlobalConfigList[2].value-cityFareGlobalConfigList[3].value}}
						</span>

					</el-form-item>
				</el-form>




				<div class="lb-goods-edit-classify row mb-lg">
					<div class="title">日间车费设置</div>
				</div>
				<el-form :rules="rules" label-width="220px" v-if="cityFareGlobalConfigList">
					<el-form-item prop="value" v-for="item,index in cityFareGlobalConfigList.slice(4,7)" :key="item.id">
						<span slot="label">
							<span class="item__label">{{item.name}}：</span>
						</span>
						<el-input v-model="item.value" placeholder="请输入" class="elInput" v-if="index==0">
							<template slot="append">km</template>
						</el-input>

						<el-input v-model="item.value" placeholder="请输入" class="elInput" v-else />

					</el-form-item>
				</el-form>




				<div class="lb-goods-edit-classify row mb-lg">
					<div class="title">夜间车费设置</div>
				</div>

				<el-form :rules="rules" label-width="220px" v-if="cityFareGlobalConfigList">
					<el-form-item prop="value" v-for="item,index in cityFareGlobalConfigList.slice(7,10)"
						:key="item.id">
						<span slot="label">
							<span class="item__label">{{item.name}}：</span>
						</span>
						<el-input v-model="item.value" placeholder="请输入" class="elInput" v-if="index==0">
							<template slot="append">km</template>
						</el-input>

						<el-input v-model="item.value" placeholder="请输入" class="elInput" v-else />

					</el-form-item>
				</el-form>

				<div class="lb-goods-edit-classify row mb-lg">
					<div class="title">虚拟里程设置</div>
				</div>
				<el-form :rules="rules" label-width="220px" v-if="cityFareGlobalConfigList">
					<el-form-item prop="value" v-for="item in cityFareGlobalConfigList.slice(10,11)" :key="item.id">
						<span slot="label">
							<span class="item__label">{{item.name}}：</span>
						</span>
						<el-input v-model="item.value" placeholder="请输入" class="elInput">
							<template slot="append">km</template>
						</el-input>
					</el-form-item>
				</el-form>


				<div class="lb-goods-edit-classify row mb-lg">
					<div class="title">说明设置</div>
				</div>
				<el-form :rules="rules" label-width="220px" v-if="cityFareGlobalConfigList">
					<el-form-item prop="value" v-for="item in cityFareGlobalConfigList.slice(11)" :key="item.id">
						<span slot="label">
							<span class="item__label">{{item.name}}：</span>
						</span>
						<editor v-model="item.value" :min-height="192" class="elEdit" />
					</el-form-item>
				</el-form>
				<!-- <el-form :rules="rules" label-width="220px">
					<el-form-item prop="value">
						<span slot="label">
							<span class="item__label">虚拟里程：</span>
						</span>
						<el-input v-model="cityFareGlobalConfigList.splitRate" placeholder="请输入提成比例" class="elInput">
							<template slot="append">%</template>
						</el-input>
					</el-form-item>
				</el-form> -->

				<div class="dialog-footer">
					<el-button type="primary" @click="subFormFare">提 交</el-button>
				</div>
			</el-tab-pane>



			<el-tab-pane label="城市车费配置" name="second">
				<el-row :gutter="10" class="mb8">
					<el-col :span="1.5">
						<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
							v-hasPermi="['cityFareConfig:cityFareConfig:add']">新增</el-button>
					</el-col>
					<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
				</el-row>
				
				<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
					label-width="68px">
					<el-form-item label="城市" prop="cityName">
						<el-input v-model="queryParams.cityName" placeholder="请输入城市" clearable
							@keyup.enter.native="handleQuery" />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
						<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
					</el-form-item>
				</el-form>
				<el-table v-loading="loading" :data="cityFareConfigList" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55" align="center" />
					<el-table-column label="ID" align="center" prop="id" />
					<el-table-column label="城市" align="center" prop="cityName" />
					<el-table-column label="日间开始时间" align="center" prop="dayStartTime" />
					<el-table-column label="日间结束时间" align="center" prop="dayEndTime" />
					<el-table-column label="夜间开始时间" align="center" prop="nightStartTime" />
					<el-table-column label="夜间结束时间" align="center" prop="nightEndTime" />
					<el-table-column label="日间起步距离" align="center" prop="dayStartDistance" />
					<el-table-column label="日间起步价" align="center" prop="dayStartPrice" />
					<el-table-column label="日间起步价外每公里多少钱" align="center" prop="dayPrePrice" />
					<el-table-column label="夜间起步距离" align="center" prop="nightStartDistance" />
					<el-table-column label="夜间起步价" align="center" prop="nightStartPrice" />
					<el-table-column label="夜间起步价外每公里多少钱" align="center" prop="nightPrePrice" />
					<el-table-column label="虚拟路程" align="center" prop="dummyDistance" />
					<el-table-column label="创建时间" align="center" prop="createTime" width="180">
						<template slot-scope="scope">
							<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
						<template slot-scope="scope">
							<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
								v-hasPermi="['cityFareConfig:cityFareConfig:edit']">修改</el-button>
							<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
								v-hasPermi="['cityFareConfig:cityFareConfig:remove']">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
					:limit.sync="queryParams.pageSize" @pagination="getList" />
			</el-tab-pane>
		</el-tabs>












		<!-- 添加或修改城市路费配置对话框 -->
		<el-drawer :title="title" :visible.sync="open" append-to-body size="50%">
			<el-form ref="form" :model="form" :rules="rules" label-width="200px">
				<div v-if="title=='添加城市路费配置'">
					<div class="lb-goods-edit-classify row mb-lg">
						<div class="title">城市设置</div>
					</div>
					<el-form-item prop="cityName">
						<span slot="label">
							<span class="item__label">城市名称：</span>
						</span>
						<el-cascader v-model="valueCity" :options="options" @change="handleChange" :props="props"
						 />
					</el-form-item>
				</div>
				
				
				<div class="lb-goods-edit-classify row mb-lg">
					<div class="title">时间段设置</div>
				</div>

				<el-form-item prop="dayStartTime">
					<span slot="label">
						<span class="item__label">日间开始时段：</span>
					</span>
					<el-time-select v-model="form.dayStartTime" :picker-options="{
							start: '00:00',
							step: '00:01',
							end: '24:00'
						}" placeholder="任意时间点" @change="showNight" />
				</el-form-item>
				<el-form-item prop="dayStartTime">
					<span slot="label">
						<span class="item__label">日间结束时段：</span>
					</span>
					<el-time-select v-model="form.dayEndTime" :picker-options="{
							start: '00:00',
							step: '00:01',
							end: '24:00'
						}" placeholder="任意时间点" @change="showNight" />
				</el-form-item>
				<el-form-item prop="value">
					<span slot="label">
						<span class="item__label">夜间时段：</span>
					</span>
					<span>
						{{nightTimeShow}}
					</span>
				</el-form-item>

				<div class="lb-goods-edit-classify row mb-lg">
					<div class="title">日间车费设置</div>
				</div>
				<el-form-item prop="dayStartDistance">
					<span slot="label">
						<span class="item__label">日间起步距离：</span>
					</span>
					<el-input v-model="form.dayStartDistance" placeholder="请输入" class="elInput">
						<template slot="append">km</template>
					</el-input>
				</el-form-item>
				<el-form-item prop="dayStartPrice">
					<span slot="label">
						<span class="item__label">日间起步价：</span>
					</span>
					<el-input v-model="form.dayStartPrice" placeholder="请输入" class="elInput" />
				</el-form-item>
				<el-form-item prop="dayPrePrice">
					<span slot="label">
						<span class="item__label">日间起步价外每公里多少钱：</span>
					</span>
					<el-input v-model="form.dayPrePrice" placeholder="请输入" class="elInput" />
				</el-form-item>

				<div class="lb-goods-edit-classify row mb-lg">
					<div class="title">夜间车费设置</div>
				</div>
				<el-form-item prop="nightStartDistance">
					<span slot="label">
						<span class="item__label">夜间起步距离：</span>
					</span>
					<el-input v-model="form.nightStartDistance" placeholder="请输入" class="elInput">
						<template slot="append">km</template>
					</el-input>
				</el-form-item>
				<el-form-item prop="nightStartPrice">
					<span slot="label">
						<span class="item__label">夜间起步价：</span>
					</span>
					<el-input v-model="form.nightStartPrice" placeholder="请输入" class="elInput" />
				</el-form-item>
				<el-form-item prop="nightPrePrice">
					<span slot="label">
						<span class="item__label">夜间起步价外每公里多少钱：</span>
					</span>
					<el-input v-model="form.nightPrePrice" placeholder="请输入" class="elInput" />
				</el-form-item>
				<div class="lb-goods-edit-classify row mb-lg">
					<div class="title">虚拟里程设置</div>
				</div>
				<el-form-item prop="dummyDistance">
					<span slot="label">
						<span class="item__label">虚拟路程：</span>
					</span>
					<el-input v-model="form.dummyDistance" placeholder="请输入" class="elInput">
						<template slot="append">km</template>
					</el-input>
				</el-form-item>

			</el-form>
			<div class="dialog-footer" style="margin-left: 30px;">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-drawer>
	</div>
</template>

<script>
	import {
		listCityFareConfig,
		getCityFareConfig,
		delCityFareConfig,
		addCityFareConfig,
		updateCityFareConfig,
		updateBanch,
		selectNightTime,
		selectCityFareCity
	} from "@/api/cityFareConfig/cityFareConfig";
	import {
		listCityFareGlobalConfig,
		getCityFareGlobalConfig,
		delCityFareGlobalConfig,
		addCityFareGlobalConfig,
		updateCityFareGlobalConfig
	} from "@/api/cityFareGlobalConfig/cityFareGlobalConfig";

	export default {
		name: "CityFareConfig",
		data() {
			return {
				nightTimeShow: '',
				activeName: 'first',
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 城市路费配置表格数据
				cityFareConfigList: [],
				cityFareGlobalConfigList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					cityName: null,
				},
				// 表单参数
				form: {},
				// 表单校验
				rules: {},
				props: {
					checkStrictly:true,
					value: "id",
					label: "cityName", //展示的lable名字
					children: "children" //展示子级
				},
				valueCity:'',
				options:[]
			};
		},
		created() {
			if (this.activeName == 'first') this.cityFareList()
		},
		methods: {
			/** 查询城市路费配置列表 */
			getList() {
				this.loading = true;
				listCityFareConfig(this.queryParams).then(response => {
					this.cityFareConfigList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			// 查询城市列表
			allCityList(){
				selectCityFareCity().then(response => {
					this.options = response.data
				});
			},
			/** 查询城市路费全局配置列表 */
			cityFareList() {
				this.loading = true;
				listCityFareGlobalConfig({
					pageNum: 1,
					pageSize: 100,
				}).then(response => {
					this.cityFareGlobalConfigList = response.rows;
					this.total = response.total;
					this.loading = false;
					this.showNight()
				});
			},
			showNight() {
				let nigTime = [],
					data
				if (this.cityFareGlobalConfigList) nigTime = this.cityFareGlobalConfigList
				if (this.activeName == 'first') {
					data = {
						dayStartTime: nigTime[0].value,
						dayEndTime: nigTime[1].value
					}
				}
				if (this.activeName == 'second') {
					data = {
						dayStartTime: this.form.dayStartTime,
						dayEndTime: this.form.dayEndTime
					}
				}
				selectNightTime(data).then(response => {
					this.nightTimeShow = response.msg;
				});
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					id: null,
					cityId: null,
					dayStartTime: null,
					dayEndTime: null,
					nightStartTime: null,
					nightEndTime: null,
					dayStartDistance: null,
					dayStartPrice: null,
					dayPrePrice: null,
					nightStartDistance: null,
					nightStartPrice: null,
					nightPrePrice: null,
					dummyDistance: null,
					isDelete: null,
					createTime: null,
					updateTime: null
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.id)
				this.single = selection.length !== 1
				this.multiple = !selection.length
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.reset();
				this.open = true;
				this.title = "添加城市路费配置";
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				const id = row.id || this.ids
				getCityFareConfig(id).then(response => {
					this.form = response.data;
					this.open = true;
					this.title = "修改城市路费配置";
					this.showNight()
				});
			},

			subFormFare() {
				updateBanch(this.cityFareGlobalConfigList).then(response => {
					this.$modal.msgSuccess("提交成功");
					this.cityFareList();
				});
			},
			/** 提交按钮 */
			submitForm() {
				let city,arr
				arr= this.nightTimeShow.split('-')
				this.form.nightStartTime = arr[0]
				this.form.nightEndTime = arr[1]
				this.$refs["form"].validate(valid => {
					if (valid) {
						if (this.form.id != null) {
							updateCityFareConfig(this.form).then(response => {
								this.$modal.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							});
						} else {
							this.valueCity.length>1 ?city =this.valueCity[1] :city =this.valueCity[0]
							this.form.cityId = city
							addCityFareConfig(this.form).then(response => {
								this.$modal.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							});
						}
					}
				});
			},
			// 标签点击
			handleClick(tab, event) {
				this.activeName = tab.name
				if (this.activeName == 'second'){
					 this.getList();
					 this.allCityList()
				}
			},
			handleChange(value) {
				console.log(value)
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const ids = row.id || this.ids;
				this.$modal.confirm('是否确认删除城市路费配置编号为"' + ids + '"的数据项？').then(function() {
					return delCityFareConfig(ids);
				}).then(() => {
					this.getList();
					this.$modal.msgSuccess("删除成功");
				}).catch(() => {});
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download('cityFareConfig/cityFareConfig/export', {
					...this.queryParams
				}, `cityFareConfig_${new Date().getTime()}.xlsx`)
			}
		}
	};
</script>

<style lang="less" scoped>
	.lb-goods-edit-classify {
		width: 100%;
		border-top: 1px solid #eff2f6;
		display: -webkit-box;
		display: -ms-flexbox;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;

		.title {
			display: inline-block;
			padding: 6px 15px;
			color: #609beb;
			background: #f5f7fa;
			margin-right: 10px;
			font-size: 14px;
		}
	}

	.item__label {
		width: 200px;
		text-align: right;
		color: #666;
		font-size: 14px;
		font-weight: 500;
	}

	.dataStary {
		align-items: center;
	}
</style>